<template>
    <div>
        <!-- 登录服务器 -->
        <form class="form" @submit.prevent="onSubmit">
            <label>用户名:
            <input type="text" v-model="username">
            </label>

            <label>
                密码:
                <input type="password" v-model="passwork">
            </label>

            <label>
                <button>提交</button>
            </label>
        </form>
        
    </div>
</template>
<style>
.form > label{
    display: block;
    border-bottom: 1px dashed #666;
}
</style>

<script>
import axios from "axios"
export default {
    data(){
        return {
            username:"",
            passwork:"123",
        }
    },
    methods:{
        onSubmit(){
            //结构
            const{username,passwork} = this.$data
            //前端做基础的校验
            if(username.trim().length < 2){
                return alter("用户名不需少于2位")
            }
            if(passwork.trim().length < 6){
                return alter("密码不能少于六位")
            }
            //发送给后端接口
            console.log(username,passwork)
            console.log(this.$data)
            axios.get('./data.json').then((res)=>{
                //模拟后台数据
                if(res.data.username === username && res.data.passwork === passwork){
                    alter("登陆成功");
                }else{
                    alter("登录失败")
                }
            })
        }
    }
}
</script>